<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="../css/common.css?01_38" />
		<link rel="stylesheet" type="text/css" href="../fonts/font-awesome.min.css?01_38" />
		<link rel="stylesheet" type="text/css" href="../mui/css/mui.css?01_38" />
		<link rel="stylesheet" type="text/css" href="../mui/css/mui.picker.min.css?01_38" />
		<link rel="stylesheet" type="text/css" href="../css/templet.css?01_38" />
		<!--公共js-->
		<script type="text/javascript" src="../common/js/jquery.js?01_38"></script>
		<script type="text/javascript" src="../common/js/fastclick.js?01_38"></script>
		
		<!--插件-->
		<script type="text/javascript" src="../common/js/vue.min.js?01_38"></script>
		<script type="text/javascript" src="../common/js/mui.min.js?01_38"></script>
		<script type="text/javascript" src="../common/js/mui.picker.js?01_38"></script>
		<script type="text/javascript" src="../common/js/mui.poppicker.js?01_38"></script>
		<script type="text/javascript" src="../common/js/jquery.qrcode.min.js?01_38"></script>
		<script type="text/javascript" src="../common/js/jquery-validate.js?01_38"></script>
		
		<script type="text/javascript" src="../common/js/common.js?01_38"></script>
		<script type="text/javascript" src="../common/js/main.js?01_38"></script>
		<script type="text/javascript" src="../common/js/app.js?01_38"></script>
		<script type="text/javascript" src="../common/js/my_common.js?01_38"></script>
		<style>
			.error-box.pad-t-10.red.center i,
			.error-box.pad-t-10.red.center.error-box span {
				display: none;
			}
			
			.error-box.pad-t-10.red.center.error i,
			.error-box.pad-t-10.red.center.error span {
				display: inline-block;
			}
			.f-25{font-size: 25px;}
		</style>
	</head>

	<body>
		<div id="app" class="wrap_body register" v-cloak>

			<div class="header f-16 fiex pad-b-10 pad-t-10 pad-l-10 pad-r-10">
				<div class="back">
					<a href="javascript:com_back();" class="bk"></a>
				</div>
			</div>

			<div class="content pad-l-30 pad-r-30 pad-t-45">
				<p @click="cl" class="f-25">{{b_lg[1199]}}</p>
				<div class="item fiex mag-t-30  first">
					<div @click="userPk" id="test" class="fiex2 fiex">
						<div class="fiex1 f-16">+{{forms.prefix}}</div>
						<div class="pull_down"></div>
					</div>
					<div class="fiex1 center c666">|</div>
					<input type="tel" name="" id="" v-model="forms.username" :placeholder="b_lg[1003]" class="pad-t-20 pad-b-20 f-16 required " data-valid="isNonEmpty" :data-error="b_lg[1123]" />
				</div>

				<div class="item cf">
					<div class="f-right fr">
						<a @click="cli" id="send" href="javascript:;" class="mag-t-20 red9 pad-l-20 pad-r-20 pad-t-10 pad-b-10 code f-16 text-cent" style="text-align: center;">{{b_lg[1203]}}</a>
					</div>
					<div class="oh">
						<input type="number" name="" v-model="forms.code" :placeholder="b_lg[1186]" class="pad-t-35 pad-b-20  f-16 required sms" data-valid="isNonEmpty" :data-error="b_lg[1187]" />
					</div>

				</div>

				<div style="position: relative;" class="item"><input type="password" name="" id="pwd" v-model="forms.password" :placeholder="b_lg[1004]" class="pad-t-35 pad-b-20 fill f-16 required" data-valid="newpassword" :data-error="b_lg[1197]" /><span v-if="forms.password.length>=2" style="width: 30px; height: 30px; position: absolute; top: 35px; right: 13px;" class="000" @click="clear_password()">X</span></div>
				<div style="position: relative;" class="item"><input type="password" name="" id="" value="" :placeholder="b_lg[1155]" class="pad-t-35 pad-b-20  fill f-16 required" data-matchID="pwd" data-valid="matchPwd" :data-error="b_lg[1014]" v-model="again_password" /><span v-if="again_password>=2" style="width: 30px; height: 30px; position: absolute; top: 35px; right: 13px;" class="000" @click="clear_again_password()">X</span></div>
				<div class="item"><input type="text" name="" id="" v-model="forms.nickname" :placeholder="b_lg[1089]" class="pad-t-35 pad-b-20  fill f-16 required" data-valid="isNonEmpty" :data-error="b_lg[1157]" /></div>
			</div>
			<!--错误提示-->
			<div class="error-box pad-t-10 red center" style="height: 10px;" id="errortip">
				<span class="mag-r-5 "></span>
			</div>
			<!--确定按钮-->
			<div class="center mag-t-40">
				<a href="javascript:;" @click="sub_form" class="bg-red9 fff pad-l-100 pad-r-100 pad-t-15 pad-b-15 center sure f-16 btn">{{b_lg[1190]}}</a>
			</div>
		</div>
		<script>
			function fun1() {
				window.onscroll = function() {
					var header = document.querySelector(".header");
					var h = document.documentElement.scrollTop;
					if(h > 1) {
						header.style.backgroundColor = "#fd5749";
					} else {
						header.style.backgroundColor = "transparent";
					}
				}
				//表单验证
				$('#app').validate({
					selectID: "#errortip" //指定弹出位置
				});
				//创建vue

				var toggle = 1; //定时器
				var ti = 60; //定时器初始时间
				var time
				var app = new Vue({
					el: "#app",
					data: {
						txt: "+60", //区号的文字
						forms: { //传输的数据
							prefix: "60", //验证码前缀
							username: "", //手机号
							password: "", //密码
							code: "", //验证码
							language: getItem('lg'), //语言
							nickname: "" //昵称
						},
						again_password:"",
						b_lg: JSON.parse(getItem('Langues')) //语言包
					},
					methods: {
						userPk: function() {
							//mui组件	  		
							userPicker.show(function(items) {
								//console.log(items)
								app.forms.prefix = items[0].value;
								//返回 false 可以阻止选择框的关闭
							});
						},
						cl: function() {
							clicked("login.html");
						},
						cli: function() { //点击发送短信
							if(!app.forms.username) {
								mui.toast(app.b_lg['1003']);
							}
							if(toggle && app.forms.username != "") { //计时结束重新发送

								var dat = {};
								dat.prefix = app.forms.prefix; //区号
								dat.username = app.forms.username; //手机号
								common_ajax("1", dat, "send_reg_code", function(h) {
									if(h.status == 1) {
										mui.toast(app.b_lg['1202']);
										time = setInterval(show, 1000);
										toggle = false;
									} else {
										mui.toast(h.msg);
									}
								})

								function show() { //开始计时的方法
									ti--;
									$("#send").text("(" + ti + ")s");
									$("#send").addClass("c");
									if(ti == 0) {
										ti = 60;
										toggle = true;
										clearInterval(time);
										$("#send").text(app.b_lg['1203']);
										$("#send").removeClass("c");
									}
								}
							}

						},
						sub_form: function() {
							if($("#app").validate('submitValidate')) {
								common_ajax("1", app.forms, "put_member_reg", function(h) {
									if(h.status == 1) {
										mui.alert(app.b_lg['1204'], "", app.b_lg["1190"], function() {
											clicked("login.html");
										});
									} else {
										mui.toast(h.msg);
									}
								})
							}
						},
						clear_password: function() {
							app.forms.password = ""
						},
						clear_again_password: function() {
							app.again_password = ""
						}
					}
				})
				//	$("input").on("focus", function() {
				//		if($(this).attr("type") == number) {
				//            $(this).parent().parent().addClass("sel_red")
				//            $(this).parent().parent().siblings().removeClass("sel_red")
				//		} else {
				//			$(this).parent().addClass("sel_red")
				//			$(this).parent().siblings().removeClass("sel_red")
				//		}
				//
				//	})
				//定义弹出组件
				var userPicker

				function setmuiselect() {
					userPicker = new mui.PopPicker({
						buttons: [app.b_lg[1049], app.b_lg[1190]]
					})
					userPicker.setData(reg_datas);
				}
				setmuiselect();
			}
		</script>
	</body>

</html>
